<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react 分为 react-dom页面开发和  react--native app开发 所有功能要拆分 -->
    <!-- react核心包,提供了操作react的所有必要功能, 但是不提供Dom操作的相关功能, web和app都使用 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- reactDOM, 提供支持操作dom的相关功能 -->
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 添加后可直接使用jsx语法 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
    <script type="text/babel">
        // react处理xss攻击直接转义了
        const htmlStr = '<h1>哈哈</h1>'
        const e = React.createElement;
        // 通过createElement创建组件 
        const LikeButton = e(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            'Like'
        );

        console.log(1111, ReactDOM)
        const msg = 'hello world';
        const reactRoot = ReactDOM.createRoot(document.getElementById('root'))

        // 直接使用jsx 创建组件
        // jsx 提供在js中编写xml(html)的功能,类似母模板语言,   jsx本质是React.createElement()函数的语法糖
        // 在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
        // jsx 可以作为变量  函数输入输出值使用
        const renderJsx = <button >
            这是jsx组件
        </button>

        // 我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中
        
        const element = (
            <div>
                <h1>Hello!</h1>
                <h2>Good to see you here.</h2>
            </div>
        );
        // 假如一个标签里面没有内容，你可以使用 /> 来闭合标签
        const element1 = <img src={user.avatarUrl} />;

        // reactRoot.render(msg);
        // reactRoot.render(LikeButton);
        // reactRoot.render(
        //     renderJsx
        // )
        // reactRoot.render(
        //     <React.Fragment>
        //         <div>直接使用jsx语法</div>
        //         <div>啊哈哈哈</div>
        //     </React.Fragment>
        // )
        const svdom = React.createElement('a', { href: 'http://www.baidu.com' }, msg)
        const vdom = React.createElement('h1', { title: msg }, svdom)
        reactRoot.render(
            <React.Fragment>
                <div>htmlStr</div>
                <div>msg</div>
                {LikeButton}
                {renderJsx}
                {vdom}
            </React.Fragment>
        )
    </script>
</body>

</html>